<!-- 邀请好友 -->
<template>

  <div class="pag" >
    <div :class="{'v-cloak': isLoading}">
      <img src="~assets/images/invitation/p4.png" alt="" class="banner">
      <div class="invitation">
        <h3 class="h-t">积攒多年的人品是时候爆发了</h3>
        <div class="int-code">
          我的邀请码：{{ invitation.code }}
          <img src="~assets/images/invitation/p5.png" class="clipboard-btn" alt="复制"
               :data-clipboard-text="invitation.code" @click="toastTip('邀请码复制成功')"></div>
        <div class="int-rule">
          <h4 class="h4-t">邀请规则说明</h4>
          <ul>
            <li>1、好友接受邀请后，每产生一笔真实交易矿工费，会产生相应比例的返佣。</li>
            <li>2、返佣的形式以CVNT形式返佣到您的交易账户，CVNT返佣比例为30%。</li>
            <li>3、好友交易返佣当日统计，次日晚到账；返佣额(CVNT)= 矿工费*返佣比例。</li>
            <li>4、邀请人永久享受好友交易产生手续费的返佣。</li>
            <li>5、如发现邀请人账户异常，人人钱包有权对该账户下返佣活动进行无效处理。</li>
            <li>活动如有调整，以人人钱包更新为准，最终解释权归人人钱包所有。</li>
          </ul>
        </div>
        <div class="int-btn" @click="generate">生成我的邀请海报</div>
      </div>
      <div class="invitation-list">
        <h3 class="h-t">邀请好友注册，坐享多重收益</h3>
        <p class="int-cvnt">通过邀请好友注册共获得{{ cvnt }}CVNT</p>
        <ul class="list-detail">
          <li class="list-header">
            <div>昵称</div>
            <div>推荐时间</div>
            <div>我得到的CVNT</div>
          </li>
          <li v-for="item in list">
            <div>{{ item.name }}</div>
            <div>{{ item.createTime }}</div>
            <div>{{ item.cvnt }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
  import { getInviteInfo } from 'api'
  import bridge from 'common/js/bridge'

  export default {
    data() {
      return {
        isLoading: false,
        invitation: {
          code: ''
        },
        cvnt: '',
        list:[]
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.getData()
      })
    },
    mounted(){

    },
    computed: {
      inUrl(){
        let {uid, invitation} = this
        let pathname
        if(process.env.NODE_ENV == 'development'){
          pathname = '/pages/invitation/index.html'
        }else{
          pathname = '/invitation.html'
        }
        return location.origin + pathname + `?invite_code=${invitation.code}`
      }
    },
    methods: {
      getData(){
        getInviteInfo()
          .then(({data})=>{
            if(!data){
              return
            }
            this.isLoading = false
            this.list = data.inviteList
            this.invitation.code = data.code
            this.cvnt = data.cvnt
            this.username = data.username
          })
          .catch(e=>{
            this.$warn(e.info)
          })
      },
      generate(){
        let {inUrl, username} = this
        if(!this.invitation['code']){
          return
        }
        bridge.openPoster(JSON.stringify({
          name: username,
          code: this.invitation.code,
          url: inUrl
        }))
      },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    background: #EBDDF8;
    height: 100%;
    text-align: center;
    overflow-y: auto;
    padding-bottom: 48px;
  }

  .banner {
    display: block;
    width: 100%;
    min-height: 578px;
  }

  .invitation {
    position: relative;
    width:690px;
    height:918px;
    background:rgba(255,255,255,1);
    border-radius:33px;
    margin: -170px auto 0 auto;
    .h-t {
      margin-bottom: 18px;
    }
  }

  .h-t {
    background: url("~assets/images/invitation/p1.png") no-repeat center center;
    background-size: contain;
    width: 440px;
    height: 66px;
    text-align: center;
    line-height: 66px;
    font-size:30px;
    font-weight:600;
    color:rgba(255,255,255,1);
    margin: 0 auto;
    transform: translateY(-30px);
  }

  .h4-t {
    background: url("~assets/images/invitation/p2.png") no-repeat center center;
    background-size: contain;
    width: 284px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    font-size:28px;
    font-weight:600;
    color:rgba(255,255,255,1);
    margin: 0 auto;
    transform: translateY(-23px);
  }

  .int-code {
    text-align: center;
    font-size:40px;
    color:rgba(32,44,91,1);
    margin-bottom: 78px;
    img {
      width: 30px;
      height: 36px;
      margin-left: 20px;
      vertical-align: middle;
    }
  }

.int-rule {
  margin: 0 auto;
  width:634px;
  height:538px;
  background:rgba(247,243,255,1);
  border-radius:10px;
  ul {
    list-style: none;
    outline: none;
    padding: 0 16px;
    font-size:26px;
    color:rgba(113,118,140,1);
    line-height:39px;
    li {
      margin-bottom: 12px;
      text-align: left;
    }
  }
}

  .int-btn {
    background: url("~assets/images/invitation/p3.png") no-repeat center center;
    background-size: contain;
    width: 634px;
    height: 110px;
    text-align: center;
    line-height: 110px;
    font-size:36px;
    font-weight:600;
    color:rgba(255,255,255,1);
    margin: 32px auto 0 auto;
  }

  .invitation-list {
    position: relative;
    width:690px;
    background:rgba(255,255,255,1);
    border-radius:33px;
    margin: 72px auto 0 auto;
    padding-bottom: 28px;
    .h-t {
      margin-bottom: 10px;
    }
  }

  .int-cvnt {
    font-size:34px;
    font-weight:600;
    color:rgba(32,44,91,1);
    margin-bottom: 43px;
  }

  .list-detail {
    list-style: none;
    padding: 0 16px;
    outline: none;
    width:634px;
    background:rgba(247,243,255,1);
    border-radius:10px;
    margin: 0 auto;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #E4E1FF;
      font-size:30px;
      color:rgba(32,44,91,1);
      height: 80px;
      &.list-header {
        font-size:22px;
        color:rgba(113,118,140,1);
      }
      &:last-of-type {
        border: 0;
      }
      > div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:nth-of-type(1) {
          width: 200px;
          text-align: left;
        }
        &:nth-of-type(2) {
          width: 175px;
          text-align: left;
        }
        &:nth-of-type(3) {
          width: 170px;
          text-align: right;
        }
      }
    }
  }

</style>













